<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>todolist</title>
    <script src="jquery.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        header{
            height: 80px;
            width: 100%;
            background: black;
            color: aliceblue;
        }
        section{
            width: 600px;
            /* height: 100%; */
            line-height: 80px;
            text-align: left;
            font-size: 28px;
            margin: 0 auto;
        }
        header section label{
            margin-right: 50px;
        }
        header section input{
            width: 250px;
            height: 44px;
            border-radius: 9px;
            padding-left: 10px;
            font-size: 22px;
        }
        h2{
            position: relative;
        }
        #todocount,#donecount{
            width: 20px;
            height: 40px;
            border-radius: 9px;
            background: pink;
            display: block;
            position: absolute;
            top: 50%;
            right: 10px;
            margin-top: -20px;
            font-size: 16px;
            text-align: center;
            line-height: 40px;
        }
        li{
            list-style: none;
            border-left: 9px solid green;
            padding-left: 10px;
            border-radius: 10px;
            background: palevioletred;
            position: relative;
            margin-bottom: 15px;
            height: 50px;
        }
        li input{
            width: 32px;
            height: 32px;
            /* vertical-align: middle; */
            position: absolute;
            top: 50%;
            margin-top: -16px;
        }
        li a{
            width: 30px;
            height: 30px;
            border-radius: 20px;
            background: gold;
            display: block;
            position: absolute;
            top: 50%;
            right: 10px;
            margin-top: -15px;
        }
        p{
            font-size: 18px;
            height: 50px;
            padding-left: 50px;
            line-height: 50px;
            color: aliceblue;
        }
        ul li{
            background: rgb(218, 156, 177);
        }

    </style>
</head>
<body>
    <!-- 不管是回车还是点击复选框，都是把本地存储的数据加载到页面。这样能保证刷新关闭页面不会丢失数据 存储的数据格式：var todolist=[{title:'',done:false}] 本地存储只能存储字符串数据-->
    <header>
        <section>
            <label for="title">ToDoList</label>
            <input type="text" id="title" name="title" placeholder="添加todo" required>
        </section>
    </header>
    <section>
        <h2>正在进行<span id="todocount"></span></h2>
        <ol id="todolist" class="demo-box">
            <!-- <li>
                <input type="checkbox"><p></p><a href="###"></a>
            </li> -->
        </ol>
        <h2>已经完成<span id="donecount"></span></h2>
        <ul id="donelist">
                <!-- <li>
                    <input type="checkbox"><p></p><a href="###"></a>
                </li> -->
        </ul>
    </section>
    
    <script>
        $(function(){
            load();
            // 数据存储在title中，给个变量判断是否已经完成  var todolist = [{title:'',done:false}]
            // var todolist = [
            //     {
            //         title: '今天要完成jquery视频的学习。',
            //         done: false
            //     },
            //     {
            //         title: '今天要健身。',
            //         done: false
            //     },
            // ];
            // 本地存储只能存储字符串数据格式  为了保存数据原有的格式，可以先把数组对象转化为字符串格式
            // var tododata = JSON.stringify(todolist);//将json对象转字符串
            // 缓存当前页面的停留的子页面和展开的数据，当切换出去该页面再回来的时候，展示的仍然是离开时的页面和数据。
            // localStorage.setItem("todo",tododata);//设置本地存储的字符串数据
            // var data = localStorage.getItem("todo");//获取被赋值后的数据,也是字符串格式
            // var data=JSON.parse(data);//读取之后，要将字符串转回数据原本的数组对象格式。字符串转json对象
            // console.log(typeof(data));
            // console.log(data);
            // console.log(data[0].title);


            // 回车事件:
            // 【先读取本地存储原有的数据(申明函数getData())，之后把最新获取到的数据追加到数组,最后把数组存储给本地存储(声明函数savaData())
            $('#title').on('keydown',function(event) {//当表单按下回车时触发函数
                if(event.keyCode===13) {//判断用户是否按下回车键
                    if($(this).val()==="") {// 输入框不能输入内容为空
                        alert('请输入内容');
                    } else {
                        // 1 读取本地存储中原有的数据
                        var local = getDate();//将读取到的本地原有数据存放到local变量里面，返回的数据时json对象或数组，所以local也是个数组
                        // console.log(local);
                        //2 更新local数组的数据，将最新的数据追加给local  push方法向数组的末尾添加一个或读个元素，并返回新的长度
                        local.push({title: $(this).val(),done:false});//$(this).val()表示输入框输入的数据内容  done:false表示未完成事项
                        // 3 将数组保存在本地存储  
                        saveDate(local);
                        // 4 将本地存储的数据渲染加载到页面中（声明load()）,先读取本地存储数据，读取到的一定是字符串格式，记得转json，然后遍历数组，有几条数据生成几个Li
                        load();
                        // 回车清空输入框的内容
                        $(this).val("");
                    }  
                }
            });


            // 读取本地存储中的数据
            function getDate() {
                var data = localStorage.getItem("todo");//读取本地存储中的数据，注意本地存储的数据只能是字符串格式
                if(data != null){//如果有数据，就将字符串数据转json对象并返回数据
                    return JSON.parse(data);
                }else{//如果没有数据就返回一个空数组
                    return [];
                }
            }


            //将新数组local数据在本地存储中保存
            function saveDate(data) {//传过来的参数是数组，json对象，要转字符串形式才能保存在本地存储中
                localStorage.setItem("todo",JSON.stringify(data));//设置本地存储中的数组的数据，将data数组赋值给todo
            }
                

            // 将本地存储数据渲染加载到页面中
            function load() {
                var data = getDate();//读取本地存储中的数据
                // console.log(data);
                // 声明两个变量  // 要分别获取到两个列表的数据，根据done属性，done==false的数据的个数就是正在进行的数量  done==true的数据的数量就是已经完成的数据的数量
                var todocount=0;
                var donecount=0;
                // 遍历之前先要清空ol里面的内容 empty()/html("")   remove()是删除所有内容包括元素自身  这样的话，调用load方法，渲染到页面的永远是最新的那一条数据，而不会重复渲染ol原有的数据
                $('ol,ul').empty();
                // 遍历数据  
                $.each(data,function(i,n){
                    // console.log(n);//打印遍历到的元素
                    // console.log(i);//打印下标索引
                    if(n.done==true){
                        // 如果当前元素的done属性为true
                        $('ul').prepend("<li><input type='checkbox' checked='checked'><p>"+n.title+'</p><a href="javascript:;" id='+i+'></a></li>');// 遍历到几条数据,就生成几条Li    
                        donecount++;
                    }
                    else if(n.done==false){
                        // 如果当前元素的done属性为false
                        $('ol').prepend("<li><input type='checkbox'><p>"+n.title+'</p><a href="javascript:;" id='+i+'></a></li>');// 遍历到几条数据,就生成几条Li 
                        todocount++;
                    }
                });
                //    设置span的内容
                $('#todocount').text(todocount);
                $('#donecount').text(donecount);
            }



            // 点击复选框实现两个列表数据的切换
            $("ol,ul").on('click','input',function(){
                // alert('222');
                // 获取本地存储的数据
                var data = getDate();
                // 修改数据
                var index = $(this).siblings('a').attr("id");//先获取到当前input索引号  和a标签是兄弟关系，索引号相同，再自定义索引号
                // console.log(index);
                        // 将数组data里面所对应索引号的数据的done属性修改
                data[index].done=$(this).prop('checked');//获取到当前Input的checked属性并赋值给done的值
                // console.log(data);
                // ----------------console.log($(this).prop('checked'));//被选中的复选框checked属性为true
                // ----------------console.log($(this).parent().siblings('li').children('input').prop('checked'));//未被选中的复选框checked属性为false        
                //-----------------将复选框的checked属性值赋给done false or true
                // 修改后的数据保存到本地存储中
                saveDate(data);
                // 重新渲染页面     如果done--true 将数据放到已完成列表  如果done--false 将数据放到正在进行列表
                load();
            });



            // 点击a标签，删除该行数据      动态生成的元素用on来绑定
            // 【点击删除，不是删除li，而是去删除本地存储对应的数据】可以给a标签自定义属性记录当前索引号,根据索引号删除数据，存储修改后的数据，然后保存至本地存储，然后从本地存储中重新渲染页面
            $('ol,ul').on('click','a',function(){//事件委派，将需要绑定在子元素的绑定事件委派给父元素 事件绑定在Ul上，但触发事件的是子元素  当子元素点击触发父元素的绑定时，会发生冒泡
                //先获取本地存储
                var data = getDate();
                // 修改数据  找到当前a所对应的数据，先给a自定义索引号 ,在遍历数据动态生成li时给它自定义id属性
                var index = $(this).attr('id');//获取自定义属性用attr()
                data.splice(index,1);//删除当前a所对应的数据  splice(from,删除的数量)
                // 将修改后的数据保存到本地存储
                saveDate(data);
                // 从本地存储重新渲染加载页面
                load();
            });
        
        })

    </script>
</body>
</html>